import { WeaEchart } from 'ecCom';
import equals from 'deep-equal';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

export default class Main extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    if (this.refs.chartpie) this.refs.chartpie.paint();
  }
  componentWillReceiveProps(nextProps) {
    if (!equals(this.props.datas, nextProps.datas)) {
      this.refs.chartpie.clear();
    }
  }
  shouldComponentUpdate(nextProps) {
    return !equals(this.props.datas, nextProps.datas);
  }
  componentDidUpdate() {
    if (this.refs.chartpie) this.refs.chartpie.paint();
  }
  render() {
    const { width = '99%', height = 300, datas } = this.props;
    return (
      <div style={{ width, height }}>
        <div style={{ height, minHeight: height }}>
          <WeaEchart
            ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@2emeio`}
            ref="chartpie"
            option={{
              title: {
              },
              tooltip: {
                trigger: 'item',
                formatter: `${getLabel(136, '客户') + getLabel(1331, '数量')} <br/>{b} : {c} ({d}%)`,
              },
              series: [
                {
                  type: 'pie',
                  radius: '45%',
                  center: ['50%', '50%'],
                  selectedMode: 'single',
                  data: datas,
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                  },
                },
              ],
            }}
            useDefault={false}
            chartAction={this.pieChartAction}
          />
        </div>
      </div>
    );
  }
    pieChartAction=(pie) => {
      const _this = this;
      pie.off('mouseover');
      pie.off('mouseout');
      pie.on('mouseover', (params) => {
        typeof _this.props.mouserover === 'function' && _this.props.mouserover(params.data.id);
      });
      pie.on('mouseout', (params) => {
        typeof _this.props.mouserover === 'function' && _this.props.mouserover('');
      });
    }
}
